<script>
import { delivery_find, quotation_add, transport_quotation } from "@/api/quotation"
import Demand from "../publish/enum/Demand"
import { getDeliveryContent, getMyQuote, cancelQuote } from "@/api/publish"
import Modal from "pages/publish/components/Modal.vue";
import VehicleList from "./formControl/vehicleSelect.vue";
import currency from "@/utils/currency"
export default {
	props: ["prop_delivery_id", "price_unit", "sourceKey"],
	components: {
		Modal,
		VehicleList
	},
	data() {
		return {
			currency,
			currencyModalShow: false,
			myQuotation: null,
			templateData: {},
			errorKey: false,
			id: "",
			showTel: false,
			content: '',
			deliveryInfo: {},
			templateTextModalShow: false,
			templateTextModalShowService: false,
			tabIndex: 1,
			// {{$t('运输方式')}}选项
			transportWayTypes: [
				{ id: 0, name: this.$t('不限') },
				{ id: 2, name: this.$t('汽运') },
				{ id: 3, name: this.$t('空运') },
				{ id: 4, name: this.$t('海运') },
				{ id: 5, name: this.$t('铁路') },
				{ id: 1, name: this.$t('其他') }
			],
			// {{$t('图片上传')}}
			fileList1: [],
			fileList2: [],
			Demand,
			formData: {
				delivery_id: "", // 发货id
				images: "", // 服务图片
				transport_images: '', // 运输图片
				price: "", // 运输单价
				price_unit: "￥", // 价格单位
				quotation_end_at: "", // 有效期截至时间
				transport_remark: '', //报价说明
				user_id: uni.getStorageSync('user_id'), // 报价用户id
				validity: "", // 时效
			},
			vehicleModalShow: false,
			//{{$t('执行车辆')}}
			vehicleList: [
				{
					currencyItem: {},
					currencyIsShow: false,
					vehicle_id: "",//车辆id
					price: "",//货主出价
					price_unit: "CNY",//价格单位
					quotation_end_at: "",//接货时间
					validity: "",//时效
				}
			],
			currentVehicleIndex: "",
			lang: uni.getStorageSync('lang'),
			priceUnit: '',
			startDate: ''
		}
	},
	created() {
		if (this.prop_delivery_id) {
			this.id = this.prop_delivery_id
			this.formData.delivery_id = this.id
			this.getDeliveryInfo()
			this.getDeliveryContent();
			this.getMyQuote()
			this.formData.delivery_id = this.prop_delivery_id
		}
		console.log('this.$props.price_unit---', this.$props.price_unit)
		this.formData.price_unit = this.$props.price_unit
		console.log('this.formData.price_unit--', this.formData.price_unit)
		this.startDate =  this.getNowFormatDate();

	},
	onLoad(options) {
		if (options.delivery_id) {
			this.id = options.delivery_id
			this.formData.delivery_id = this.id
			this.getDeliveryInfo()
			this.getDeliveryContent();
		}
	},
	methods: {

		getNowFormatDate() {
			let date = new Date(),
			year = date.getFullYear(), //获取完整的年份(4位)
			month = date.getMonth() + 1, //获取{{$t('当前')}}月份(0-11,0代表1月)
			strDate = date.getDate() // 获取{{$t('当前')}}日(1-31)
			if (month < 10) month = `0${month}` // 如果月份{{$t('是')}}个位数，在前面补0
			if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
			console.log('this.startDate---', `${year}-${month}-${strDate}`)
			return `${year}-${month}-${strDate}`
		},
		log(e) {
			console.log(e)
		},
		async getMyQuote() {
			const res = await getMyQuote({
				delivery_id: this.id,
				user_id: uni.getStorageSync('user_id')
			})
			let data = res.data.data.data
			if (res.data.code == 200 && data[0]) {
				data = data[0];
				this.myQuotation = data
				if (data.car_id) {
					const cars = res.data.data.data
					this.vehicleList = cars.map(item => {
						item.selectedItem = item.car
						item.vehicle_id = item.car_id
						item.quotation_end_at = item.delivery_at
						item.validity = item.validity
						return item
					})
				} else {
					const data = res.data.data.data[0]
					//表单复显
					this.formData.price = data.price // 运输单价
					this.formData.price_unit = data.price_unit // 价格单位
					this.formData.quotation_end_at = data.quotation_end_at // 有效期截至时间
					this.formData.transport_remark = this.lang == 'zh' ? data.transport_remark.remark : data.transport_remark.remark_ru // 报价说明
					this.formData.validity = data.validity // 时效
					//图片
					this.fileList2 = data.transport_attachment.map(item => ({ url: item.path }));
					this.formData.transport_images = this.fileList2.map(item => item.url).join(',')
				}
				// this.priceUnit = data.price_unit
				console.log('this.myQuotation---', this.myQuotation)
			}
		},
		cancelTel() {
			this.showTel = false
		},
		confirmTel() {
			uni.makePhoneCall({
				phoneNumber: this.deliveryInfo.tel || ''
			})
			this.showTel = false
		},
		callUser() {
			// this.isMessageGo({
			// 	action: 'call',
			// 	data: {
			// 		userId: uni.getStorageSync("user_id"),
			// 		type: 1,
			// 	}
			// })
			this.content = this.$t('是否拨打电话给') + this.deliveryInfo.tel
			this.showTel = true
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
		selectVehicle(item) {
			this.vehicleModalShow = false
			console.log('item---', item)
			console.log('88888888----', this.vehicleList)
			// if(this.vehicleList.length > 1) {
			// 	this.vehicleList.map(itemHave => {
			// 		if ((itemHave.selectedItem && itemHave.selectedItem.car_number) == item.car_number) {
			// 			uni.$u.toast('该车辆已绑定，请选择请他车辆')
			// 			return
			// 		}
			// 	})
			// }
			console.log('77777')
			// console.log('----', vehicleItem.selectedItem.car_number)
			this.vehicleList[this.currentVehicleIndex].selectedItem = item
		},
		deleteVehicle(index) {
			if (this.vehicleList.length == 1) return this.toast('至少保留一个车辆');
			uni.showModal({
				title: this.$t('提示'),
				content: '确定要删除吗？',
				success: (res) => {
					if (res.confirm) {
						this.vehicleList.splice(index, 1)
					}
				}
			})
		},
		rulesFun(e) {
			console.log('e', e.detail.value)
			if(!(/^\d+$/.test(e.detail.value))) {
				this.errorKey = true
				console.log('888888')
			} else {
				this.errorKey = false
			}
		},
		addVehicle() {
			this.vehicleList.push({
				currencyItem: {},
				vehicle_id: "",//车辆id
				price: 0,//货主出价
				price_unit: "￥",//价格单位
				quotation_end_at: "",//接货时间
				validity: "",//时效
				currencyIsShow: false,
			})
		},
		async getDeliveryContent() {
			const res = await getDeliveryContent()
			this.templateData = res.data.data.data
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
			this.formData.images = this[`fileList${event.name}`].map(item => item.url).join(',')
		},
		// 新增图片
		async afterReadTransport(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: $t('上传中')
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
			this.formData.transport_images = this[`fileList${event.name}`].map(item => item.url).join(',')
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://app.gluz.com.cn/api/common/upload',
					filePath: url,
					name: 'file',
					success: (res) => {
						const data = JSON.parse(res.data)
						resolve(data.data.fullurl)
					}
				});
			})
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 删除图片
		deletePicTransport(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		async getDeliveryInfo() {
			try {
				uni.showLoading({
					title: this.$t('加载中'),
					mask: true
				})
				const res = await delivery_find({
					delivery_id: this.id
				})
				this.deliveryInfo = res.data.data.data
				uni.hideLoading()
			} catch (error) {
				console.log(error)
			}
		},

		async submit() {
			try {
				if (!this.formData.price) return this.toast('请输入报价');
				if (!this.formData.quotation_end_at) return this.toast('请选择有效期');
				if (!this.formData.validity) return this.toast('请输入时效');
				if (!this.formData.transport_remark) return this.toast('请输入报价说明');
				if(this.errorKey) return this.toast('请检查报价价格');
				if(this.fileList2.length > 0) {
					this.formData.images = this.fileList2.map(item => item.url).join(',')
				} 
				console.log('this.formData---', this.formData)
				// return
				uni.showLoading({
					title: this.$t('提交中'),
					mask: true
				})
				const res = await quotation_add(this.formData)
				
				// res.data.code == 200 && !this.myQuotation
				if (res.data.code == 200 && this.$props.sourceKey) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
				this.$emit('cancelQuote', true)

				uni.showToast({
					title: res.data.message,
					icon: 'none'
				})
			} catch (error) {
				console.log(error)
			}
		},
		async transportQuotation() {
			try {
				//检查车辆列表的已选车辆和各个参数
				console.log(this.vehicleList.length);
				if (!this.vehicleList.length) return this.toast('报价车辆不能为空');
				if (!this.vehicleList.every(item => item.selectedItem && item.selectedItem.id)) return this.toast('请选择车辆');
				if (!this.vehicleList.every(item => item.price)) return this.toast('请输入运输单价');
				if (!this.vehicleList.every(item => item.quotation_end_at)) return this.toast('请选择接货时间');
				if (!this.vehicleList.every(item => item.validity)) return this.toast('请输入运输速度');
				//检查已选车辆Id不能重复
				const carIds = this.vehicleList.map(item => item.selectedItem.id)
				if (carIds.length !== new Set(carIds).size) return this.toast('请删除报价重复车辆');
				const params = {
					// 报价用户id
					user_id: uni.getStorageSync('user_id'),
					// 发货id
					delivery_id: this.id,
					// 车辆id 逗号字符串拼接
					car_ids: this.vehicleList.map(item => item.selectedItem.id).join(','),
					// 接货时间 逗号拼接
					delivery_at: this.vehicleList.map(item => item.quotation_end_at).join(','),
					// 运输单价 逗号拼接
					price: this.vehicleList.map(item => item.price).join(','),
					// 价格单位 逗号拼接
					// price_unit: this.vehicleList.map(item => item.price_unit).join(','),
					price_unit: this.$props.price_unit,
					// 有效期截至时间 逗号拼接
					quotation_end_at: this.vehicleList.map(item => item.quotation_end_at).join(','),
					// 运输速度（天） 逗号拼接
					validity: this.vehicleList.map(item => item.validity).join(',')
				}
				uni.showLoading({
					title: this.$t('提交中'),
					mask: true
				})
				const res = await transport_quotation(params)
				// res.data.code == 200 && !this.myQuotation
				if (res.data.code == 200 && this.$props.sourceKey) {
					setTimeout(() => {
						// uni.navigateBack()
						uni.redirectTo({
							url: '/pages/sourceInformation/index',
						})
					}, 500)
				}
				uni.showToast({
					title: res.data.message,
					icon: 'none'
				})
				uni.hideLoading()
				this.$emit('cancelQuote', true)
			} catch (error) {
				console.log(error)
			}
		},
		clipText(text) {
			uni.setClipboardData({
				data: text
			})
		},
		// 模拟填写数据
		mockFormData() {
			this.formData = {
				...this.formData,
				price: "1000",
				quotation_end_at: "2024-12-31",
				validity: "7",
				remark: "您好，这是一个测试报价。\n1. 运输方案：门到门\n2. 时效：7天\n3. 服务内容：全程负责",
				transport_remark: "您好，这是一个测试报价。\n1. 运输方案：门到门\n2. 时效：7天\n3. 服务内容：全程负责"
			}
		},
		cancel(reQuote) {
			uni.showModal({
				title: this.$t('提示'),
				content: reQuote ? '确定重新报价吗？' : '确定取消报价吗？',
				success: async (res) => {
					if (res.confirm) {
						const res = await cancelQuote({
							user_id: uni.getStorageSync('user_id'),
							delivery_id: this.prop_delivery_id
						})
						if (res.data.code == 200) {
							this.myQuotation = null
							if (!reQuote) {
								this.$emit('cancelQuote', true)
							} else {
								this.formData.images = ""  // {{$t('服务')}}{{$t('图片')}}
								this.formData.transport_images = ""  // {{$t('运输')}}{{$t('图片')}}
								this.formData.price = ""  // {{$t('运输')}}单价
								this.formData.price_unit = "￥"  // {{$t('价格单位')}}
								this.formData.quotation_end_at = ""  // 有效期截至时间
								this.formData.transport_remark = ""  // {{$t('报价说明')}}
								this.formData.validity = ""  // {{$t('时效')}}
								//{{$t('执行车辆')}}
								this.vehicleList = [
									{
										vehicle_id: "",//车辆id
										price: "",//{{$t('货主出价')}}
										price_unit: "￥",//价格单位
										quotation_end_at: "",//接货时间
										validity: "",//时效
									}
								]
							}
							this.$emit('cancelQuote', false)
							this.toast('取消成功')
						}
					}
				}
			})
		}
	}
}
</script>

<template>
  <view class="container flex flex-col overflow-hidden relative">
    <div>
      <u-popup :show="templateTextModalShow" round="50">
        <div class="p-50">
          <div class="between">
            <div class="flex">
              <div
                class="font-bold fz30"
                :class="{ 'tabActive text-blue-2 fz34': tabIndex == 1 }"
                @click="tabIndex = 1"
              >
                {{$t('运输报价')}}
              </div>
              <div
                class="font-bold ml-40 fz30"
                :class="{ 'tabActive text-blue-2 fz34': tabIndex == 2 }"
                @click="tabIndex = 2"
              >
                {{$t('服务报价')}}
              </div>
            </div>
            <div @click="templateTextModalShow = false">
              <image
                src="/static/icon/close.png"
                mode="widthFix"
                class="w-25"
              ></image>
            </div>
          </div>
          <div v-if="templateData.length > 0">
            <textarea
              readonly
              class="w-full rounded-16 mt-50 p-30"
              style="
                background-color: #f7f7f7;
                color: #8c8c8c;
                font-size: 26rpx;
                height: 800rpx;
                line-height: 55rpx;
              "
              :value="templateData[2].content"
              disabled
              v-if="tabIndex == 1"
              maxlength="-1"
            ></textarea>

            <textarea
              readonly
              class="w-full rounded-16 mt-50 p-30"
              style="
                background-color: #f7f7f7;
                color: #8c8c8c;
                font-size: 26rpx;
                height: 800rpx;
                line-height: 55rpx;
              "
              :value="templateData[3].content"
              disabled
              v-else
              maxlength="-1"
            ></textarea>

            <div class="between">
              <div
                class="flex-1 bg-primary center h-80 rounded-50 mt-40 text-white fz30 font-bold"
                @click="
                  clipText(templateData[tabIndex == 1 ? 2 : 3].content);
                  templateTextModalShow = false;
                "
              >
                {{$t('复制文本')}}
              </div>
              <div class="w-50"></div>
              <div
                class="flex-1 bg-primary center h-80 rounded-50 mt-40 text-white fz30 font-bold"
                @click="
                  formData.transport_remark =
                    templateData[tabIndex == 1 ? 2 : 3].content;
                  templateTextModalShow = false;
                "
              >
                {{$t('填入模板')}}
              </div>
            </div>
          </div>
        </div>
      </u-popup>
    </div>

    <template v-if="!prop_delivery_id">
      <div style="height: 50rpx"></div>
      <div class="header">
        <div class="back center" @click="back">
          <image
            src="/static/icon/back.png"
            mode="widthFix"
            class="w-20"
          ></image>
        </div>
        {{ myQuotation ? $t('我的报价') : $t('发起报价') }}
      </div>

      <div
        v-if="
          deliveryInfo.demand && deliveryInfo.demand.split(',').includes('1')
        "
        class="between address-header bg-white"
        style="padding: 0 54rpx 24rpx; border-radius: 0 0 50rpx 50rpx"
      >
        <div class="">
          <div class="flex mb-16">
            <flag
              class="w-50"
              :country="get(deliveryInfo, 'departure.area_info.country')"
            />
            <div class="font-bold fz28 ml-10">
              {{
                get(deliveryInfo, "departure.area_info.country") == 0
                  ? "中国"
                  : $t('俄罗斯')
              }}
            </div>
          </div>
          <div class="fz22 text-555">
            {{ get(deliveryInfo, "departure.area_info.mergename") }}
          </div>
        </div>
        <div class="pb-40">
          <image
            src="/static/icon/route.png"
            mode="widthFix"
            style="width: 175rpx"
          ></image>
        </div>
        <div class="">
          <div class="flex mb-16" style="justify-content: flex-end">
            <flag
              class="w-50"
              :country="get(deliveryInfo, 'reach.area_info.country')"
            />
            <div class="font-bold fz28 ml-10">
              {{
                get(deliveryInfo, "reach.area_info.country") == 0
                  ? "中国"
                  : $t('俄罗斯')
              }}
            </div>
          </div>
          <div class="fz22 text-555">
            {{ get(deliveryInfo, "reach.area_info.mergename") }}
          </div>
        </div>
      </div>
    </template>

    <div class="w-full">
      <slot></slot>
    </div>

    <div class="p-30 flex-1 relative" style="overflow: auto">
      <div
        class="section pt-34 pl-24 pr-24 pb-24 mb-20"
        v-if="!prop_delivery_id"
      >
        <div class="between pb-34" style="border-bottom: 1rpx solid #f0f0f0">
          <div class="fz26 text-555">{{$t('发布时间')}}:{{ deliveryInfo.create_at }}</div>
          <div class="fz26 text-333 font-bold">
            {{ deliveryInfo.goods_type === 0 ? "大件" : "小件" }}-
            {{
              get(deliveryInfo, "demand", "").split(",").includes("1")
                ? $t('运输')
                : ""
            }}
            <!-- 全包 -->
            {{
              get(deliveryInfo, "demand", "").split(",").includes("2")
                ? $t('报关')
                : ""
            }}
            {{
              get(deliveryInfo, "demand", "").split(",").includes("3")
                ? "转关"
                : ""
            }}
            {{
              get(deliveryInfo, "demand", "").split(",").includes("4")
                ? "清关"
                : ""
            }}
          </div>
        </div>

        <div class="between mt-34">
          <div class="text-555 fz28">{{$t('货物信息')}}</div>
          <div class="text-333 fz28 font-bold">
            {{ get(deliveryInfo, "goods_info.title", "") }} /
            {{ get(deliveryInfo, "goods_info.goods_weight", "") }}{{$t('吨')}} /
            {{ get(deliveryInfo, "goods_info.goods_volume", "") }}{{$t('立方米')}} /
            {{ get(deliveryInfo, "goods_info.package.title", "") }}
          </div>
        </div>
        <div class="between mt-34">
          <div class="text-555 fz28">{{$t('业务需求')}}</div>
          <!-- <div class="flex" v-if="deliveryInfo.demand"> -->
          <!-- 1运输 2报关 3转关 4清关 仓储 装卸 -->
          <div class="flex" v-if="deliveryInfo.goods_type === 0">
            <template v-for="item in deliveryInfo.demand.split(',')">
              <image
                src="/static/icon/s6.png"
                v-if="item == Demand.YUNSHU"
                mode="widthFix"
                class="w-45"
              >
              </image>
              <image
                src="/static/icon/s1.png"
                v-if="item == Demand.BAOGUAN"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
              <image
                src="/static/icon/s2.png"
                v-if="item == Demand.ZHUANGUAN"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
              <image
                src="/static/icon/s3.png"
                v-if="item == Demand.QINGGUAN"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
              <image
                src="/static/icon/s4.png"
                v-if="item == Demand.CANGCHU"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
              <image
                src="/static/icon/s5.png"
                v-if="item == Demand.ZHUANGXIE"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
            </template>
          </div>
          <!-- </div> -->
          <div v-else>
            <template>
              <image src="/static/icon/s6.png" mode="widthFix" class="w-45">
              </image>
              <image
                src="/static/icon/s1.png"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
              <image
                src="/static/icon/s2.png"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
              <image
                src="/static/icon/s3.png"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
              <image
                src="/static/icon/s4.png"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
              <image
                src="/static/icon/s5.png"
                mode="widthFix"
                class="w-45 ml-26"
              ></image>
            </template>
          </div>
        </div>
        <div class="between mt-34">
          <div class="text-555 fz28">{{$t('运输方式')}}</div>
          <div class="text-333 fz28 font-bold">
            {{
              transportWayTypes[get(deliveryInfo, "transport_way", 0)].name
            }}
            - {{ get(deliveryInfo, "transport_type", "") }} -
            {{ get(deliveryInfo, "railway_wagon_info.title", "") }}
          </div>
        </div>
        <div class="between mt-34">
          <div class="text-555 fz28">{{$t('货主出价')}}</div>
          <div class="text-333 fz28 font-bold">{{$t('等待报价')}}</div>
        </div>

        <div class="between pt-14 mt-34" style="border-top: 1rpx solid #f0f0f0">
          <div class="flex">
            <div class="flex">
              <image
                src="/static/icon/send.png"
                mode="widthFix"
                class="w-25"
              ></image>
              <div class="ml-5 fz22 text-888 ml-10">
                {{ get(deliveryInfo, "attach.quote_number", 0) }}
              </div>
            </div>
            <div class="flex ml-28">
              <image
                src="/static/icon/view.png"
                mode="widthFix"
                class="w-25"
              ></image>
              <div class="ml-5 fz22 text-888 ml-10">
                {{ get(deliveryInfo, "attach.lookat_number", 0) }}
              </div>
            </div>
            <div class="flex ml-28">
              <image
                src="/static/icon/message2.png"
                mode="widthFix"
                class="w-25"
              ></image>
              <div class="ml-5 fz22 text-888 ml-10">
                {{ get(deliveryInfo, "attach.comment_number", 0) }}
              </div>
            </div>
          </div>
          <u-modal
            class="text-center"
            :show="showTel"
            :content="content"
            :showCancelButton="true"
            @cancel="cancelTel"
            @confirm="confirmTel"
          ></u-modal>
          <div
            class="bg-primary center fz28 text-white rounded-50"
            style="width: 322rpx; height: 68rpx"
            @click="callUser"
          >
            {{$t('联系货主')}}
          </div>
        </div>
      </div>

      <!-- <pre>
				{{ formData }}
			</pre> -->
			
			<!--  小件用公司报价 
			(deliveryInfo.demand &&
			  deliveryInfo.demand
				.split(',')
				.some((item) =>
				  [Demand.BAOGUAN, Demand.ZHUANGUAN, Demand.QINGGUAN].includes(
					Number(item)
				  )
				)) || deliveryInfo.goods_type == '1' -->
      <template
        v-if="
          deliveryInfo.demand &&
          deliveryInfo.demand
            .split(',')
            .some((item) =>
              [Demand.BAOGUAN, Demand.ZHUANGUAN, Demand.QINGGUAN].includes(
                Number(item)
              )
            )
        "
      >
        <!-- <div class="mock-btn bg-primary center fz28 text-white rounded-50 mb-20" @click="mockFormData">
					{{$t('模拟填写')}}
				</div> -->

        <div class="section pt-34 pl-24 pr-24 pb-34 mb-20">
          <div
            class="fz28 text-111 font-bold pb-25 mb-25"
            style="border-bottom: 1rpx solid #f0f0f0"
          >
            {{$t('报价总价')}}
          </div>

          <div class="between">
            <div class="fz28 text-555 flex-shirnk-0 mr-20 w-180">
              {{$t('当前总价')}}
              <div
                v-if="myQuotation && myQuotation.price_unit"
                class="fz24 text-gray-3d3d3d font-bold"
              >
                {{ currency.getSymboleByCode(myQuotation.price_unit) }}
                ({{ myQuotation.price_unit }})
              </div>
              <div v-else class="fz24 text-gray-3d3d3d font-bold">
                {{ currency.getSymboleByCode(price_unit) }}
                ({{ price_unit }})
              </div>
            </div>

            <input
              placeholder="请输入报价"
              type="text"
              v-model="formData.price"
              class="bg-gray-700 h-80 rounded-16 w-full pl-20 pr-20"
              @input="rulesFun"
              :disabled="myQuotation != null"
            />

            <!-- <div class="rounded-18 bg-gray-700 text-gray-500 h-80 w-200 center  ml-30 flex-shrink-0" @click="() => {
							if (myQuotation) return
							formData.price_unit = formData.price_unit == '￥' ? '₽' : '￥'
						}">
							<text class="mr-5 text-gray-500"
								:class="{ 'text-blue-2': formData.price_unit == '￥' }">￥</text>
							/
							<text class="ml-10 text-gray-500"
								:class="{ 'text-blue-2': formData.price_unit == '₽' }">₽</text>
						</div> -->
          </div>
          <p
            v-if="errorKey"
            class="fz24"
            style="color: orangered; margin-left: 200rpx"
          >
            {{$t('请输入数字')}}
          </p>
          <div class="text-555 fz28 font-bold mt-20 mb-20">{{$t('货币种类')}}</div>

          <div>
            <!-- :disabled="myQuotation != null" -->
            <currency
              v-if="myQuotation && myQuotation.price_unit"
              :disabled="true"
              :currency="myQuotation.price_unit"
              @confirm="
                (e) => {
                  formData.currencyItem = e;
                  formData.price_unit = e.code;
                }
              "
            ></currency>
            <currency
              v-else
              :disabled="true"
              :currency="price_unit"
              @confirm="
                (e) => {
                  formData.currencyItem = e;
                  formData.price_unit = e.code;
                }
              "
            ></currency>
          </div>

          <div class="between mt-30">
            <div class="fz28 text-555 flex-shirnk-0 mr-20 w-180">{{$t('有效期至')}}</div>
            <picker
              :disabled="myQuotation != null"
							:start="startDate"
              mode="date"
              class="w-full"
              :value="formData.quotation_end_at"
              @change="formData.quotation_end_at = $event.detail.value"
            >
              <div
                class="bg-gray-700 h-80 rounded-16 w-full flex pl-20 pr-20"
                :style="{ color: formData.quotation_end_at ? '#333' : '#888' }"
              >
                {{ formData.quotation_end_at || $t('请选择时间') }}
              </div>
            </picker>
          </div>

          <div class="between mt-30">
            <div class="fz28 text-555 flex-shirnk-0 mr-20 w-180">
              {{$t('合计时效')}}({{$t('天')}})
            </div>
            <input
              :disabled="myQuotation != null"
              type="number"
              v-model="formData.validity"
              placeholder="请输入时效"
              class="bg-gray-700 h-80 rounded-16 w-full pl-20 pr-20"
            />
          </div>
        </div>

        <div class="section pt-34 pl-24 pr-24 pb-34 mb-20">
          <div class="between pb-25">
            <div class="fz28 text-111 font-bold">{{$t('报价说明')}}</div>
            <div
              class="bg-primary rounded-50 fz28 text-white template-btn"
              @click="templateTextModalShow = true"
            >
              {{$t('填写模板')}}
            </div>
          </div>

          <textarea
            :disabled="myQuotation != null"
            style="background: #f7f7f7; height: 800rpx; line-height: 50rpx"
            class="w-full rounded-16 p-30 fz28"
            placeholder="请输入报价说明"
            v-model="formData.transport_remark"
            maxlength="-1"
          ></textarea>

          <b class="flex mt-40 mb-40 center">
            <u-upload
              :disabled="myQuotation != null"
              :fileList="fileList2"
              name="2"
              multiple
              :maxCount="10"
              :previewFullImage="true"
              @afterRead="afterReadTransport"
              @delete="deletePicTransport"
              width="150"
              height="150"
            >
            </u-upload>
          </b>
        </div>
        <!-- <div class="section  pt-34 pl-24 pr-24 pb-34 mb-20">
					<div class="between pb-25">
						<div class="fz28 text-111 font-bold">{{$t('服务报价')}}</div>
						<div class="bg-primary rounded-50 fz28 text-white template-btn"
							@click="templateTextModalShowService = true">{{$t('填写模板')}}
						</div>
					</div>

					<textarea style="background: #F7F7F7;min-height: 500rpx;line-height: 50rpx;"
						class="w-full rounded-16 p-30 fz28" placeholder="请输入服务报价说明"
						v-model="formData.remark"></textarea>

					<b class="flex mt-40 mb-40 center">
						<u-upload :fileList="fileList1" name="1" multiple :maxCount="10" :previewFullImage="true"
							@afterRead="afterRead" @delete="deletePic" width="150" height="150">
						</u-upload>
					</b>

				</div> -->

        <div style="height: 200rpx"></div>
        <div class="form-control p-30 bg-white" v-if="!myQuotation">
          <div
            class="submit center h-100 bg-primary text-white fz32 rounded-50"
            @click="submit"
          >
            {{$t('提交报价')}}
          </div>
        </div>
      </template>

      <Modal
        title="选择车辆"
        :show.sync="vehicleModalShow"
        @close="vehicleModalShow = false"
      >
        <div style="height: 80vh; background: #f1f1f1">
          <vehicle-list
            @submit="selectVehicle"
            :vehicleList="vehicleList"
          ></vehicle-list>
        </div>
      </Modal>

	<!--  小件用公司报价 v-if="deliveryInfo.demand == 1 && deliveryInfo.goods_type != '1'" -->
      <template v-if="deliveryInfo.demand == 1">
        <div
          class="section p-20 mb-30"
          v-for="(vehicleItem, index) in vehicleList"
        >
          <div class="between">
            <div class="fz28 text-111 font-bold">{{$t('执行车辆')}}</div>
            <div
              class="text-blue-2 fz24"
              v-if="!myQuotation"
              @click="
                vehicleModalShow = true;
                currentVehicleIndex = index;
              "
            >
              {{ vehicleItem.selectedItem ? $t('修改车辆') : $t('选择车辆') }}
            </div>
          </div>

          <div
            class="vehicle-item mt-20 p-20 rounded-25"
            style="background: #f7f7f7"
          >
            <template v-if="vehicleItem.selectedItem">
              <div class="flex pl-20 mt-10">
                <div class="font-bold mr-20">
                  {{ vehicleItem.selectedItem.name }}
                </div>
                <div class="vehicle-number fz26">
                  {{ vehicleItem.selectedItem.car_number }}
                  <span v-if="vehicleItem.selectedItem.trailer_number">
                    <span class="mx-10">{{$t('挂')}}</span>
                    <span>{{ vehicleItem.selectedItem.trailer_number }}</span>
                  </span>
                </div>
              </div>
              <div
                style="
                  height: 1rpx;
                  width: 100%;
                  background: #dedede;
                  margin-top: 30rpx;
                  margin-bottom: 34rpx;
                "
              ></div>
              <div class="between mb-14">
                <div class="flex-1 flex flex-col">
                  <div class="font-bold fz30 text-333">
                    {{
                      get(vehicleItem, "selectedItem.car_category_name.title")
                    }}
                  </div>
                  <div class="fz22 text-gray-600 mt-16">{{$t('车型')}}</div>
                </div>
                <div class="flex-1 flex flex-col">
                  <div class="font-bold fz30 text-333">
                    {{ get(vehicleItem, "selectedItem.car_l") }}*{{
                      get(vehicleItem, "selectedItem.car_w")
                    }}*{{ get(vehicleItem, "selectedItem.car_h") }}
                  </div>
                  <div class="fz22 text-gray-600 mt-16">{{$t('尺寸')}}(m)</div>
                </div>
                <div class="flex-1 flex flex-col">
                  <div class="font-bold fz30 text-333">
                    {{ get(vehicleItem, "selectedItem.product_volume") }}
                  </div>
                  <div class="fz22 text-gray-600 mt-16">{{$t('容积')}}(m³)</div>
                </div>
                <div class="flex-1 flex flex-col">
                  <div class="font-bold fz30 text-333">
                    {{ get(vehicleItem, "selectedItem.product_weight") }}
                  </div>
                  <div class="fz22 text-gray-600 mt-16">{{$t('载重')}}(t)</div>
                </div>
              </div>
            </template>
            <div
              v-else
              class="center pt-30 pb-30"
              @click="
                vehicleModalShow = true;
                currentVehicleIndex = index;
              "
            >
              <image
                src="/static/icon/add.png"
                mode="widthFix"
                class="w-30 mr-10"
              ></image>
              <div class="fz28 text-gray-600">{{$t('点击选择车辆')}}</div>
            </div>
          </div>

          <div class="text-555 fz28 font-bold mt-40">{{$t('当前总价')}}(元)</div>
          <div class="between mt-20">
            <div class="relative w-full rounded-18 bg-gray-700 h-80 fz24 flex">
              <div
                v-if="myQuotation && myQuotation.price_unit"
                class="fz30 text-gray-3d3d3d font-bold h-80 center pb-5 pl-30 mr-20 flex flex-shrink-0"
              >
                {{ currency.getSymboleByCode(myQuotation.price_unit) }}
                ({{ myQuotation.price_unit }})
              </div>
              <div
                v-else
                class="fz30 text-gray-3d3d3d font-bold h-80 center pb-5 pl-30 mr-20 flex flex-shrink-0"
              >
                {{ currency.getSymboleByCode(price_unit) }}
                ({{ price_unit }})
              </div>
              <input
                v-model="vehicleItem.price"
                :disabled="myQuotation != null"
                type="number"
                class="w-full h-full"
                @input="rulesFun"
                placeholder="请输入出价"
              />
            </div>

            <!-- <div class="rounded-18 bg-gray-700 h-80  center ml-30 flex-1 flex-shrink-0 ml-20">
							<div class="rounded-18 bg-gray-700 text-gray-500 h-80 w-200 center flex-shrink-0" @click="() => {
								if (myQuotation) return
								vehicleItem.price_unit = vehicleItem.price_unit == '￥' ? '₽' : '￥'
							}">
								<text class="mr-5 text-gray-500"
									:class="{ 'text-blue-2': vehicleItem.price_unit == '￥' }">￥</text>
								/
								<text class="ml-10 text-gray-500"
									:class="{ 'text-blue-2': vehicleItem.price_unit == '₽' }">₽</text>
							</div>
						</div> -->
          </div>
          <p
            v-if="errorKey"
            class="fz24"
            style="color: orangered; margin-left: 160rpx"
          >
            {{$t('请输入数字')}}
          </p>

          <div class="text-555 fz28 font-bold mt-20 mb-20">{{$t('货币种类')}}</div>

          <div>
            <currency
              v-if="myQuotation && myQuotation.price_unit"
              :disabled="true"
              :currency="myQuotation.price_unit"
              @confirm="
                (e) => {
                  vehicleItem.currencyItem = e;
                  vehicleItem.price_unit = e.code;
                }
              "
            ></currency>
            <currency
              v-else
              :disabled="true"
              :currency="price_unit"
              @confirm="
                (e) => {
                  vehicleItem.currencyItem = e;
                  vehicleItem.price_unit = e.code;
                }
              "
            ></currency>
          </div>

          <div class="text-555 fz28 font-bold mt-40">{{$t('接货时间')}}</div>
          <div
            class="relative flex-1 mt-20 rounded-18 bg-gray-700 h-80 w-full mr-30 pl-35"
          >
            <picker
              :disabled="myQuotation != null"
              mode="date"
              :value="vehicleItem.quotation_end_at"
              :start="startDate"
              @change="vehicleItem.quotation_end_at = $event.detail.value"
            >
              <div
                class="w-full h-80 flex fz24"
                :style="{
                  color: vehicleItem.quotation_end_at ? '#333' : '#888',
                }"
              >
                {{ vehicleItem.quotation_end_at || $t('请选择时间') }}
              </div>
            </picker>
          </div>

          <div class="text-555 fz28 font-bold mt-40">{{$t('合计时效')}}({{$t('天')}})</div>
          <div class="relative flex-1 mt-20">
            <input
              :disabled="myQuotation != null"
              v-model="vehicleItem.validity"
              type="number"
              class="rounded-18 bg-gray-700 h-80 w-full mr-30 pl-35 fz24"
              placeholder="请输入运输速度"
            />
          </div>

          <div
            v-if="!myQuotation"
            class="del center fz28"
            @click="deleteVehicle(index)"
          >
            <image
              src="/static/icon/del2.png"
              mode="widthFix"
              class="w-30 mr-10 mt-5"
            ></image>
            {{$t('删除')}}
          </div>
        </div>

        <div
          v-if="!myQuotation"
          class="center h-80 bg-white mt-20 rounded-16 text-888 fz28"
          @click="addVehicle"
        >
          <image
            src="/static/icon/add.png"
            mode="widthFix"
            class="w-30 mr-10"
          ></image>
          {{$t('报价车辆')}}
        </div>

        <div style="height: 200rpx"></div>
        <div class="form-control p-30 bg-white" v-if="!myQuotation">
          <div
            class="submit center h-100 bg-primary text-white fz32 rounded-50"
            @click="transportQuotation"
          >
            {{$t('提交报价')}}
          </div>
        </div>
      </template>

      <div class="form-control p-30 bg-white between" v-if="myQuotation">
        <div
          class="submit center h-100 bg-primary text-white fz32 rounded-50 flex-1"
          @click="cancel(false)"
          style="color: #278aff; border: 1rpx solid #278aff; background: #fff"
        >
          {{$t('取消报价')}}
        </div>
        <div class="w-20"></div>
        <div
          class="submit center h-100 bg-primary text-white fz32 rounded-50 flex-1"
          @click="cancel(true)"
        >
          {{$t('重新报价')}}
        </div>
      </div>
    </div>
  </view>
</template>

<style lang="less">
.template-btn {
  width: 180rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
}

.address-header {
  padding-top: 50rpx !important;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.tabActive {
  position: relative;

  &:after {
    content: "";
    position: absolute;
    bottom: -20rpx;
    border-radius: 20rpx;
    left: 50%;
    width: 83rpx;
    height: 6rpx;
    background-color: #278aff;
    margin-left: -46.5rpx;
  }
}

.del {
  color: #f53f3f;
  height: 80rpx;
  background-color: #fff1f1;
  margin-top: 40rpx;
  border-radius: 16rpx;
}

.bg-gray-700 {
  background: #f7f7f7;
}

.relative {
  position: relative;
}

.vehicle-number {
  background-color: #ffbb00;
  padding: 10rpx 20rpx;
  color: #fff;
  border-radius: 50rpx;
}

.section {
  border-radius: 26rpx;
  background-color: #fff;
}

page {
  height: 100%;
}

.container {
  height: 100%;
  align-items: stretch;
  background: #f6f7fb url("/static/bg/publish.png") no-repeat;
}

.header {
  font-size: 34rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-top: var(--status-bar-height);
}

.back {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  top: 15rpx;
}

.mock-btn {
  width: 200rpx;
  height: 68rpx;
  margin: 0 auto;
  cursor: pointer;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  top: 0;
  left: 0;
}

.relative {
  position: relative;
}
</style>
